<template>
<div class="mt">
    <van-grid :border="false" :column-num="5">
        <van-grid-item v-for="(value,index) in navList" :key="index" :icon="value.imgUrl" :text="value.navName" />
    </van-grid>
</div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  export default defineComponent({
    name:'NavBars',
  })
</script>

<script lang="ts" setup>
import {ref} from "vue"

let navList = ref([
    {imgUrl:"https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png",navName:"新品首发"},
    {imgUrl:"https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png",navName:"居家生活"},
    {imgUrl:"https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png",navName:"服饰鞋包"},
    {imgUrl:"https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png",navName:"美食酒水"},
    {imgUrl:"https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png",navName:"个护清洁"},
    {imgUrl:"https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png",navName:"母婴亲子"},
    {imgUrl:"https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png",navName:"运动旅行"},
    {imgUrl:"https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png",navName:"数码家电"},
    {imgUrl:"https://yanxuan.nosdn.127.net/static-union/1642506913355bb9.png",navName:"宠物生活"},
    {imgUrl:"https://yanxuan.nosdn.127.net/static-union/16644541382b06e4.png",navName:"每日抄底"},
])
</script>

<style lang="scss" scoped>
    .mt{
        margin-top: 5px;
    }
    .nav{
        display: flex;
        flex-wrap: wrap;
        .nav_item{
        width: 20%;
        .navImg{
        width: 60px;
        height: 60px;
        margin: auto;
            img{
            width: 100%;
            height: 100%;
        }
    }
        .navText{
            font-size: 10px;
            text-align: center;
        }

    }
    }
   
  
</style>